<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="id" label="学号" width="120"> </el-table-column>
    <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
    <el-table-column prop="major" label="专业" width="120"> </el-table-column>
    <el-table-column prop="grade" label="成绩" width="120"> </el-table-column>
    <el-table-column prop="student_class" label="班级" width="120">
    </el-table-column>
    <el-table-column prop="address" label="家庭地址" width="300">
    </el-table-column>
    <el-table-column prop="phone" label="手机" width="120"> </el-table-column>
    <el-table-column prop="email" label="邮箱" width="120"> </el-table-column>
    <el-table-column fixed="right" label="操作" width="100">
      <template slot-scope="scope">
        <el-button @click="showDiolog(scope.row)" type="text" size="small"
          >删除</el-button
        >
        <el-button type="text" @click="showForm(scope.row)" size="small"
          >修改</el-button
        >
      </template>
    </el-table-column>
    <a-modal
      title="修改信息"
      :visible="formVisible"
      ok-text="确认"
      cancel-text="取消"
      @ok="handleOk('ruleForm')"
      @cancel="handleCancel('ruleForm')"
    >
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="名字" prop="name">
          <el-input styel="width:140px" v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="专业" prop="major">
          <el-input v-model="ruleForm.major"></el-input>
        </el-form-item>
        <el-form-item label="成绩" prop="grade">
          <el-input v-model="ruleForm.grade"></el-input>
        </el-form-item>
        <el-form-item label="班级" prop="student_class">
          <el-input v-model="ruleForm.student_class"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>
      </el-form>
    </a-modal>
  </el-table>
</template>
<script>
let checkGrade = (rule, value, callback) => {
  setTimeout(() => {
    if (isNaN(value)) {
      callback(new Error('请输入数字值'))
    } else {
      callback()
    }
  }, 1000)
}
export default {
  name: 'Home',
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      formVisible: false,
      row: null,
      ruleForm: {
        id: null,
        name: null,
        major: null,
        grade: null,
        student_class: null,
        address: null,
        phone: null,
        email: null,
      },
      rules: {
        grade: [{ validator: checkGrade, trigger: 'blur' }],
      },
    }
  },
  mounted() {
    this.getStudent()
  },
  methods: {
    showDiolog(row) {
      let that = this
      this.dialogVisible = true
      this.row = row
      this.$confirm({
        title: '你要删除吗?',
        content: '想清楚!',
        okText: '确定',
        cancelText: '取消',
        onOk() {
          that.deleteStudent()
          console.log('OK')
        },
        onCancel() {
          console.log('Cancel')
        },
      })
    },

    showForm(row) {
      this.formVisible = true
      this.row = row
    },

    getStudent() {
      let that = this
      this.$axios.get('/queryStudent').then(
        function (response) {
          console.log(response.data)
          that.tableData = response.data
        },
        function (err) {
          console.log(err)
        }
      )
    },

    deleteStudent() {
      let id = this.row.id
      let that = this
      this.$axios.get('/deleteStudent/' + id).then(
        function (response) {
          console.log(response)
          that.$message.success('删除成功!')
          that.getStudent()
        },
        function (err) {
          console.log(err)
          that.$message.error('删除失败!')
        }
      )
    },

    updateStudent() {
      let that = this
      this.ruleForm.id = this.row.id
      that.ruleForm.grade =
        that.ruleForm.grade === null ? this.row.grade : that.ruleForm.grade
      this.$axios
        .post('/updateStudent', that.ruleForm, {
          headers: { 'content-type': 'application/json' },
        })
        .then(
          function (response) {
            console.log(response)
            that.$message.success('修改成功')
            that.getStudent()
          },
          function (err) {
            console.log(err)
          }
        )
    },

    handleOk(formName) {
      this.updateStudent()
      this.$refs[formName].resetFields()
      this.formVisible = false
    },
    handleCancel(formName) {
      console.log('Clicked cancel button')
      this.$refs[formName].resetFields()
      this.formVisible = false
    },
  },
}
</script>
<style></style>
